<template>
<div>
    <search-com style="margin-top:7px" @keyword="search"></search-com>
    <div class="zuijin">
        <p>
            <span>
                <img src="@/assets/img/zuijin.png" alt=""><span>最近搜索</span>  
            </span>
            <span class="qingkong" @click="cancle">
                清空记录
            </span>
        </p>
        <ul>
            <router-link v-for="(item,index) in nearest" :key="index" :to="'searchResult?keyword='+item" v-if="index<10">{{item}}</router-link>
        </ul>
    </div>
    <div class="remen">
        <p>
            <span>
                <img src="@/assets/img/remen.png" alt=""><span>热门搜索</span>  
            </span>
        </p>
        <ul>
            <router-link v-for="(item,index) in data.list" :key="index" :to="'searchResult?keyword='+item.title">{{item.title}}</router-link>
        </ul>
    </div>
</div> 
</template>

<script>

    import request from "@/request/index.js"
    import searchCom from "@/components/common/search.vue";
    export default {
        name: "Search1",
        components: {
            searchCom,
        },
        data() {
            return {
                data:{},
                searchContent:'',
                listData:{},
                nearest:[],
            }
        },
        watch:{
           nearest(newVal,oldVal){

           } 
        },
        methods:{
            search(keyword){
                this.searchContent=keyword;
                // request.searchGoods(this);
                this.$router.push({
                    path: '/searchResult?keyword='+this.searchContent
                });
            },
            cancle(){
                localStorage.setItem('searchGoods1','');
                this.nearest=[];
            }
        },
        mounted() {
            request.hotSearchTopTen(this);
            if(window.localStorage.getItem('searchGoods1')){
                this.nearest=JSON.parse(window.localStorage.getItem('searchGoods1'));
            }
            
            
        },
    }
</script>

<style scoped lang="scss">
.zuijin,.remen{
    padding: 0 4vw;
    margin-top: 15px;
    img{
        width: 18px;
        vertical-align: middle;
        margin-right: 7px;
    }
    span{
        font-size: 14px;
        color: #333333;
        vertical-align: middle;
    }
    .qingkong{
        float:right;
        color:#FF4C50
    }
    ul{
        margin: 10px 0px;
        a{
            color: #666666;
            border-radius: 50px;
            border: 1px solid #666666;
            color: #666666;
            line-height: 24px;
            padding: 0 13px;
            display: inline-block;
            margin: 5px;
        }
            
    }
}

</style>
